import React, { SFC } from 'react';
import { ITabBarAPI , ITabBarItemAPI } from "@tools/AntdMobile";
import "@tools/styles/TabBar.scss";

interface IProps {
    url: string; // 图片地址
}

export const TabIcon: SFC<IProps> = ({ url }) => {
    return (
        <div className="TabIcon">
            <img className="TabImg" src={url} />
        </div>
    )
}

export const TabBarConf: ITabBarAPI = {
    tabBarPosition: "bottom",
    barTintColor: "white",
    tintColor: "#33A3F4",
    unselectedTintColor: "#949494",
    prerenderingSiblingsNumber: 0,
    noRenderContent: true,
}

export const TabBarItemConf: ITabBarItemAPI[] = [
    {
        title: "Funny",
        key: "Funny",
        icon: <TabIcon url={require("@images/SvgPack/Icon_Smile.svg")} />,
        selectedIcon: <TabIcon url={require("@images/SvgPack/Icon_Smile_Active.svg")} />
    },
    {
        title: "Note",
        key: "Note",
        icon: <TabIcon url={require("@images/SvgPack/Icon_Note.svg")} />,
        selectedIcon: <TabIcon url={require("@images/SvgPack/Icon_Note_Active.svg")} />
    },
    {
        title: "Find",
        key: "Find",
        icon: <TabIcon url={require("@images/SvgPack/Icon_Find.svg")} />,
        selectedIcon: <TabIcon url={require("@images/SvgPack/Icon_Find_Active.svg")} />
    },
    {
        title: "More",
        key: "More",
        icon: <TabIcon url={require("@images/SvgPack/Icon_More.svg")} />,
        selectedIcon: <TabIcon url={require("@images/SvgPack/Icon_More_Active.svg")} />
    }
]